<template>
  <div class="box" :style="{ borderColor: props.color }">
    <template v-for="(item, index) in props.list" :key="item.key">
      <div class="item">
        <div class="item-box">
          <div
            :class="['content', item.key === 1 ? 'content-select' : '']"
            :style="{ background: item.key === 1 ? props.color : '' }"
            v-color="[props.color, item.key === 1]"
          >
            <div
              class="content-item"
              :style="{ fontSize: props.fontSize + 'px' }"
            >
              {{ item.name }}
            </div>
            <div
              class="content-item"
              :style="{ fontSize: props.fontSize + 'px' }"
            >
              {{ item.value }}人
            </div>
          </div>
        </div>
        <div
          class="item-after"
          :style="{
            borderColor: props.color
          }"
          v-if="index !== props.list.length - 1"
        ></div>
      </div>
    </template>
  </div>
</template>
<script setup lang="ts">
const props = withDefaults(
  //参数说明
  defineProps<{
    layout?: 'horizontal' | 'vertical'; //水平/垂直
    fontSize?: number;
    color?: string;
    list: any[];
  }>(),
  {
    layout: 'vertical', //垂直
    fontSize: 16,
    color: '#fe9728'
  }
);
</script>
<style lang="less" scoped>
@import url('@/style/mixin.less');
.box {
  //   width: 100%;
  //   min-height: 100px;
  padding: 10px;
  border-radius: 5px;
  display: flex;
  border: 2px solid;
  .item {
    flex: 1;
    // .flex-align-items-mixins(row,center)
    display: flex;
    align-items: center;
    justify-content: center;
    &-box {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        padding: 0 30px;
        &-item {
          padding: 5px 0;
        }
      }
      .content-select {
        border-radius: 5px;
        color: white;
      }
      .content:hover {
        cursor: pointer;
        color: red;
        border-radius: 5px;
      }
    }
  }
  .item-after {
    height: 50%;
    border-right: 2px solid;
  }
}
</style>
